<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="表格" name="first">
      <el-card class="box-card">
        <el-row>
          <el-col :span="12" :offset="8">
            <my-date-day v-on:query="queryTable"></my-date-day>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-table :data="tableData" stripe border>
              <el-table-column prop="point" label="时刻点"> </el-table-column>
              <el-table-column prop="real" label="实际用电"> </el-table-column>
              <el-table-column prop="plan" label="计划用电"> </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-card>
    </el-tab-pane>
    <el-tab-pane label="曲线图" name="second">
      <my-chart></my-chart>
    </el-tab-pane>
    <el-tab-pane label="平均准确率" name="third">
      <avg-table></avg-table>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import myDateDay from "../../myDateDay.vue";
import myChart from "./ddjh_da_chart.vue";
import avgTable from "./ddjh_da_avgtable.vue";
export default {
  components: {
    myDateDay,
    myChart,
    avgTable,
  },
  data() {
    return {
      activeName: "first",
      // 表格数据
      tableData: [],
      // start: '',
      // end: ''
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    async queryTable(date) {
      const { data: res } = await this.$http.post(
        "/manage1/ddjh/da/vue_ddjh_table",
        date
      );
      console.log("date@@@", date);
      // const { data: res } = await this.$http.post(
      //   "/manage1/ddjh/da/vue_ddjh_table",
      //   date,
      //   {
      //     headers: {
      //       "Content-Type": "application/json;charset=UTF-8",
      //     },
      //   }
      // );
      this.tableData = res.data;
      console.log(res);
    },
  },
};
</script>

<style scoped>
</style>